<template>
  <view class="commentitem">
    <view class="header">
      <view>
        <uv-avatar @click.stop="clickuserAvatar(data)" :src="data.userossAvatar" default-url="/static/defaultavatar.png"
          shape="square"></uv-avatar>
      </view>
      <view class="header_right">
        <view class="top">
          <view class="username">
            <view class="username_item" v-if="!(data.tenant_id === '1' && data.type === 'tiancai')">

              {{ data.userName }}
            </view>
            <view class="username_item" v-else>

              {{ getphone(data.userId) }}
            </view>
            <view class="vip">
              <view class="view"> V{{ data.userLevel }} </view>
            </view>
          </view>
          <view class="dianping">
            <uv-tags v-if="data.state === '待鉴定'" :text="$t('待鉴定')" size="mini" bgColor="#748ee2" borderColor="#748ee2"
              color="#ffffff"></uv-tags>
            <uv-tags v-else-if="data.state === '待反馈'" :text="$t('待反馈')" size="mini" bgColor="#f9ae3d"
              borderColor="#f9ae3d" color="#ffffff"></uv-tags>
            <uv-tags v-else-if="data.identifycommentstate === 3" :text="$t('已处理')" size="mini" bgColor="#6ea942"
              borderColor="#6ea942" color="#ffffff"></uv-tags>
            <uv-tags v-else-if="isNumber(data.identifycommentstate)" :text="$t('已预警')" size="mini" bgColor="#FD754C"
              borderColor="#FD754C" color="#ffffff"></uv-tags>

            <view class="dianping-type">
              <uv-icon v-if="data.type === 'meituan'" custom-prefix="custom-icon" labelColor="#000000" color="#FEC201"
                :name="iconmeituan" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'dianping'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#F9934A" :name="icondianping" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'eleme'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#4683fa" :name="iconeleme" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'meituanwaimai'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#FEC201" :name="iconmeituanwaimai" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'douyin'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#2c2c2c" :name="douyin" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'tiancai'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#F9934A" :name="tiancai" size="18"></uv-icon>
              <uv-icon v-else-if="data.type === 'jdms'" custom-prefix="custom-icon" labelColor="#ffffff"
                color="#FF0036" :name="jingdong" size="18"></uv-icon>
            </view>
          </view>
        </view>
        <view class="top2">
          <view class="username">
            <uv-rate readonly gutter="1" active-color="#FD754C" allowHalf v-model="data.accurateScore"></uv-rate>
            <view>{{ data.accurateScore }}{{ $t("星") }}</view>
          </view>
          <view class="dianping-type">{{
            dicttype.find((c) => c.value === data.type)?.label
          }}</view>
        </view>
        <view class="multi-comment-alert" v-if="!['meituanwaimai', 'eleme'].includes(data.type!) && Number(data.commentusercount) > 1">
          <uv-icon name="warning-fill" color="#FF6B35" size="20"></uv-icon>
          <text class="alert-text">多次评价用户</text>
        </view>
        <view class="top3" v-if="!['meituanwaimai', 'eleme'].includes(data.type!) && Number(data.commentusercount) > 1">
          用户{{ data.commentusercount }}次评价,点击头像查看
        </view>
      </view>
    </view>

    <view class="datacontext" @click="clickcontent(data)">
      <text user-select>
        {{ data.content ? data.content : "此用户没有填写评价。" }}
      </text>
      <!-- <view user-select v-else>
        <view
          v-if="data.content"
          v-for="v in JSON.parse(data.content)"
          :key="v"
          class="tiancai"

        >
          <view class="tiancai-name">{{ v.name }}</view>
          <uv-rate
            readonly
            gutter="1"
            active-color="#FD754C"
            v-if="Number(v.star) || !v.value"
            :count="5"
            :value="v.star"
          ></uv-rate>
          <view v-else>{{ v.value }}</view>
        </view>
      </view> -->
    </view>
    <view class="data-poiName" @click="clickcontent(data)">
      <view v-if="(data.showSource2?.split('|')[0].length || 0) > 5">
        {{ data.showSource2 }}
      </view>
      <view>
        {{ data.deptname }}
      </view>
      <view v-if="data.feedbackTime">
        <view v-if="['eleme', 'meituanwaimai'].includes(data.type!)">
          {{ dayjs(data.feedbackTime).format("YYYY-MM-DD") }}
        </view>
        <view v-else>
          {{ dayjs(data.feedbackTime).format("YYYY-MM-DD HH:mm:ss") }}
        </view>
      </view>
    </view>
    <view v-if="pictures?.length" class="data-pictures">
      <uv-album :urls="pictures" :multipleSize="'calc(30vw - 16rpx)'"></uv-album>
    </view>
    <view v-if="videos?.length" class="data-pictures">
      <uvVideo :file="videos"></uvVideo>
    </view>
    <view class="datacontext text-info" v-if="info && data.CustomerFeedback">
      <text user-select class="truncated">
        {{ feedbackset?.customer }}: {{ data.CustomerFeedback.slice(0, 15) }}
      </text>
    </view>
    <view class="datacontext text-info" v-if="info && data.results">
      <text user-select class="truncated">
        {{ feedbackset?.method }}: {{ data.results.slice(0, 15) }}
      </text>
    </view>
    <view class="datacontext text-info" v-if="info && data.customerremarks">
      <text user-select class="truncated">
        顾客信息: {{ data.customerremarks.slice(0, 15) }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { isNumber } from "lodash-es";
import {
  iconvip,
  icondianping,
  iconmeituan,
  iconeleme,
  iconmeituanwaimai,
  dicttype,
  douyin,
  tiancai,
  jingdong
} from "@/util/data";
import { geturl, getphone } from "@/util";
import { computed } from "vue";
import uvVideo from "@/components/uv-video/index.vue";
import { useI18n } from "vue-i18n";
const $t = useI18n().t;
const p = withDefaults(
  defineProps<{
    data: Eps.BaseUserCommentEntity;
    clickcontent?: (e: Eps.BaseUserCommentEntity) => void;
    clickpoiName?: (e: Eps.BaseUserCommentEntity) => void;
    clickuserAvatar?: (e: Eps.BaseUserCommentEntity) => void;
    info?: boolean;
    feedbackset?: any;
  }>(),
  {
    clickcontent: () => { },
    clickpoiName: () => { },
    clickuserAvatar: () => { },
  }
);

const videos = computed(() => {
  return p.data.videos?.filter((c: any) =>
    c.url.includes("mxzj-translate.oss-cn-chengdu.aliyuncs.com")
  );
});



const pictures = computed(() => {
  return p.data.pictures
    ?.filter((c: any) => !c.url.includes("douyinpic.com"))
    .map((e: any) => geturl(e.url));
});
</script>

<style scoped lang="scss">
.commentitem {
  background-color: $uni-text-color-inverse;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  gap: 24rpx;
  align-items: center;
  min-width: calc(100vw - 64rpx);

  .header {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    width: 100%;

    .header_right {
      flex: 1;

      .top {
        height: 43rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-weight: 600;

        .username {
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          display: flex;
          flex-wrap: wrap;

          .username_item {
            max-width: 320rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
          }
        }

        .vip {
          height: 43rpx;
          align-items: center;
          display: flex;
          justify-content: center;

          .view {
            align-items: center;
            display: flex;
            justify-content: center;
            width: 45rpx;
            height: 12px;
            background-color: #fd754c;
            margin-left: 12rpx;
            border-radius: 2px;
            font-size: 10px;
            color: #ffffff;
          }
        }

        .dianping {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12rpx;
        }
      }

      .dianping-type {
        font-size: 24rpx;
        text-align: center;
        display: flex;
        align-items: center;
        min-width: 80rpx;
        justify-content: center;
      }

      .top2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .username {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          font-size: 12px;
          gap: 12rpx;
        }
      }

      .multi-comment-alert {
        display: flex;
        align-items: center;
        gap: 8rpx;
        margin-top: 8rpx;
        padding: 8rpx 12rpx;
        background-color: #FFF4F0;
        border-radius: 8rpx;
        border-left: 4rpx solid #FF6B35;

        .alert-text {
          font-size: 22rpx;
          color: #FF6B35;
          font-weight: 600;
        }
      }

      .top3 {
        font-size: 20rpx;
        color: #aaaaaa;
      }
    }
  }

  .datacontext {
    font-size: 28rpx;
    color: rgba(102, 102, 102, 1);
    line-height: 40rpx;
    width: 100%;
  }

  .text-info {
    color: #666;
  }

  .data-pictures {
    width: 100%;
    // width: calc(30vw - 16rpx);
  }

  .data-poiName {
    color: rgba(170, 170, 170, 1);
    font-size: 12px;
    line-height: 20px;
    width: 100%;
  }

  .tiancai {
    display: flex;
    flex-direction: column;

    .tiancai-name {
      font-weight: bold;
    }
  }
}
</style>
